<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.js" charset="UTF-8"></script>
<title>Insert title here</title>
</head>
<body>
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 315
    ,url: 'XinwenfeileiCx' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
      ,{field: 'fl', title: '新闻分类',}
      ,{field: 'right', align:'center',toolbar:'#barDemo'}
    ]]
  });
 
//监听工具条
table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
 var data = obj.data; //获得当前行数据
 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
 var tr = obj.tr; //获得当前行 tr 的DOM对象
 console.log(data);
 if (layEvent === 'detail') { //查看
   
  //do somehing
 } else if (layEvent === 'del') { //删除
  layer.confirm('真的删除行么', function(index) {
   obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
   layer.close(index);
   //向服务端发送删除指令
   //写对应ajax
   $.ajax({
    url : "",

    type : "get",//请求方式
    data : {//参数
     id : data.id
    },
    success : function(res) {//成功以后的回调函数
     if (res == 1) {
      alert("删除成功！");
      window.location.reload();
     } else {
      alert("删除失败！");
     }
    }
   });

  });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  }
});
});
</script>
	<script type="text/html" id="imgTpl">
    < img src="{{d.imgUrl}}" />
 </script>
 <!-- 行内工具栏 -->
 <script type="text/html" id="barDemo">
        
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</ a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</ a>
 </script>

</body>
</html>